<template>
  <div class="page-content">
    <div style="margin-top: 0.625rem; display: flex; flex-wrap: wrap">
      <el-card
        style="width: 25rem;height: auto;font-size: 1.2rem;margin-right: 1rem;margin-top: 1rem;"
        v-for="(item, index) in imgList"
        :key="index"
      >
        <div
          slot="header"
          class="clearfix"
          style="width: 100%; text-align: center"
        >
          位置:鸽笼{{ index + 1 }}
        </div>
        <video
          :src="item.url"
          width="100%"
          height="100%"
          autoplay
          controls
          loop
        ></video>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "WarnOnline",
  meta: {
    title: "在线监测"
  },
  data() {
    return {
      imgList: [
        { url: "https://img.qkeep.cn/pigeon/3s.mp4" },
        { url: "https://img.qkeep.cn/pigeon/8s.mp4" },
        { url: "https://img.qkeep.cn/pigeon/3s.mp4" },
        { url: "https://img.qkeep.cn/pigeon/8s.mp4" },
        { url: "https://img.qkeep.cn/pigeon/3s.mp4" }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  .page {
    margin-top: 1.25rem;
    text-align: center;
  }
}
</style>
